
import { useReducer, useState } from "react";
function One() {
    return (
        <div>
            <h1>子组件一</h1>
        </div>
    )
}


function Two() {
    return (
        <div>
            <h2>子组件二</h2>
        </div>
    )
}

// 定义reducer函数
let reducer = (state,action)=>{
    console.log(state)
    console.log(action)
    switch(action.type){
        case "ADD":
            let newState = {...state};
            newState.cartNum++
            return newState;
        case 'REDUCE':
            let newStates = {...state};
            newStates.cartNum --;
            return newStates;
        default :
            return state;
    }
}
//  定义初始化状态
let initState= {
    cartNum:10
}
function App() {
    //  创建useReducer  参数一 reducer处理函数 参数二 初始化状态
    let [state,disPath] = useReducer(reducer,initState);
    let {cartNum}  = state;
    console.log(cartNum)
    return (
        <div>
            <h1>购物车数量 {cartNum}</h1>
            <button onClick={()=>{
                disPath({
                    type:"ADD"
                })
            }}>+</button>
            <button onClick={()=>{
                disPath({
                    type:"REDUCE"
                })
            }}>-</button>
             <One></One>
                <Two />
        </div>
    )
}


export default App;